<template>
  <Card :bordered="false">
    <p slot="title">菜单管理</p>
    <Layout>
      <Header class="header-grids">
        <Row>
          <Button size="large" icon="ios-add" type="primary" @click="addChildNode">添加子节点</Button>
          <Button size="large" icon="ios-add" class="space-little" @click="addTopNode">添加顶部菜单</Button>
          <Button size="large" icon="ios-trash" type="error" class="space-little" @click="deleteNodes">批量删除</Button>
          <Dropdown  @on-click="dispatchActions" class="space-little">
            <Button size="large" type="default">
              下拉菜单
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem  v-for="item in dropDownSelect" value="item.value" :name="item.value" :key="item.value">{{ item.label }}</DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <Switch size="large" class="space-little" v-model="isCascade">
            <span slot="open">级联</span>
            <span slot="close">单选</span>
          </Switch>
        </Row>
      </Header>
      <Layout>
        <Sider class="side-node space-little">
          <Row>
            <Alert style="height:40px" show-icon>当前选择编辑：
              <Button class="select-title text-btn" style="padding: 0 15px 0" size="large" v-text="checkedNode.name"
                      type="text">
              </Button>
            </Alert>
          </Row>
          <Row>
            <Input suffix="ios-search" placeholder="菜单名称" width="100%"/>
          </Row>
          <Row>
            <Tree :data="menutree" ref="tree" show-checkbox :check-strictly="!isCascade"
                  @on-select-change="selectTreeMenu"></Tree>
            <Spin size="large" fix v-if="spinShow"></Spin>
          </Row>
        </Sider>
        <Content class="space-little">
          <Row>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
              <FormItem label="类型">
                <Icon
                  :type="formValidate.level === 1 ? 'md-paper-plane': (formValidate.level === 2 || formValidate.level === 3)  ? 'md-reorder':formValidate.level ===4? 'md-radio-button-on':'ios-help-circle-outline'"></Icon>
                {{formValidate.level === 1 ? '顶级菜单': (formValidate.level === 2 || formValidate.level === 3) ? '页面菜单' :
                formValidate.level === 4 ? '按钮':'待定'}}
              </FormItem>
              <FormItem label="名称" prop="name">
                <Input v-model="formValidate.name" class="form-input-length" placeholder="输入菜单名称"/>
              </FormItem>
              <FormItem label="路由地址" prop="path">
                <Input v-model="formValidate.path" class="form-input-length" placeholder="输入路由地址"/>
              </FormItem>
              <FormItem label="路由英文名" prop="nameEn">
                <Input v-model="formValidate.nameEn" class="form-input-length" placeholder="输入路由英文名"/>
              </FormItem>
              <FormItem label="排序值" prop="sort">
                <InputNumber :max="10" :min="1" v-model="formValidate.sort"></InputNumber>
              </FormItem>
              <FormItem label="是否启用" prop="isEnable">
                <Switch size="large" v-model="formValidate.isEnable">
                  <span slot="open">启用</span>
                  <span slot="close">禁用</span>
                </Switch>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">修改并保存</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </Form>
          </Row>
        </Content>
      </Layout>
      <!--<Footer>提交、修改等按钮</Footer>-->
    </Layout>

    <!--子节点模态框-->
    <Modal loading closable v-model="childNodeModel" ref="childNodeModel" draggable scrollable title="添加子节点(可拖动)">
      <Form ref="childForm" :model="childForm" :rules="ruleValidate" :label-width="100">
        <FormItem label="类型">
          <Icon
            :type="(checkedNode.level+1) === 1 ? 'md-paper-plane': ((checkedNode.level+1) === 2 || (checkedNode.level+1) === 3) ? 'md-reorder':(checkedNode.level+1)===4 ?  'md-radio-button-on':'ios-help-circle-outline'"></Icon>
          {{(checkedNode.level+1) === 1 ? '顶级菜单':((checkedNode.level+1) === 2 || (checkedNode.level+1) === 3) ? '页面菜单':
          (checkedNode.level+1) === 4?'按钮':'待定'}}
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="childForm.name" class="form-input-length" placeholder="输入菜单名称"/>
        </FormItem>
        <FormItem label="路由地址" prop="path">
          <Input v-model="childForm.path" class="form-input-length" placeholder="输入路由地址"/>
        </FormItem>
        <FormItem label="路由英文名" prop="nameEn">
          <Input v-model="childForm.nameEn" class="form-input-length" placeholder="输入路由英文名"/>
        </FormItem>
        <FormItem label="排序值" prop="sort">
          <InputNumber :max="10" :min="1" v-model="childForm.sort"></InputNumber>
        </FormItem>
        <FormItem label="是否启用" prop="isEnable">
          <Switch size="large" v-model="childForm.isEnable">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </Switch>
        </FormItem>
      </Form>
      <div slot="footer" style="margin-left: 340px;">
        <Button type="default" size="large" @click="childNodeCancel('childForm')">取消</Button>
        <Button type="primary" size="large" @click="childNodeOk('childForm')">提交</Button>
      </div>
    </Modal>

    <!--顶级节点模态框-->
    <Modal loading closable v-model="topNodeModel" ref="topNodeModel" draggable scrollable title="添加顶级节点(可拖动)">
      <Form ref="topForm" :model="topForm" :rules="ruleValidate" :label-width="100">
        <FormItem label="类型">
          <Icon type="md-paper-plane"></Icon>
          顶层
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="topForm.name" class="form-input-length" placeholder="输入菜单名称"/>
        </FormItem>
        <FormItem label="路由地址" prop="path">
          <Input v-model="topForm.path" class="form-input-length" placeholder="输入路由地址"/>
        </FormItem>
        <FormItem label="路由英文名" prop="nameEn">
          <Input v-model="topForm.nameEn" class="form-input-length" placeholder="输入路由英文名"/>
        </FormItem>
        <FormItem label="排序值" prop="sort">
          <InputNumber :max="10" :min="1" v-model="topForm.sort"></InputNumber>
        </FormItem>
        <FormItem label="是否启用" prop="isEnable">
          <Switch size="large" v-model="topForm.isEnable">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </Switch>
        </FormItem>
      </Form>
      <div slot="footer" style="margin-left: 340px;">
        <Button type="default" size="large" @click="topNodeCancel('topForm')">取消</Button>
        <Button type="primary" size="large" @click="topNodeOk('topForm')">提交</Button>
      </div>
    </Modal>
  </Card>


</template>

<script>
  export default {
    name: 'menumgt',
    data() {
      return {
        more: "",
        spinShow:false,//Spin loading样式
        checkedNode: '',
        childNodeModel: false,
        topNodeModel: false,
        isCascade: false,//默认是级联  true则代表单选
        //右侧表单
        formValidate: {
          name: '',
          path: '',
          nameEn: '',
          sort: 0,
          isEnable: false,
        },
        //添加子节点 model
        childForm: {
          name: '',
          path: '',
          nameEn: '',
          sort: 0,
          isEnable: false,
        },
        //添加顶级节点 model
        topForm: {
          name: '',
          path: '',
          nameEn: '',
          sort: 0,
          isEnable: false,
        },
        ruleValidate: {
          name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          path: [
            {required: true, message: '路由地址不能为空', trigger: 'blur'},
          ],
          nameEn: [
            {required: true, message: '路由英文名不能为空', trigger: 'blur'}
          ]
        },
        buttonProps: {
          type: 'default',
          size: 'small',
        },
        menutree: [//菜单树模拟数据
          {
            expand: true,
            title: "并列顶层",
            level: 1,
            name: "并列顶层",
            path: "/",
            nameEn: "atop",
            sort: 0,
            isEnable: false
          },
          {
            expand: true,
            title: "顶层",
            level: 1,
            name: "顶层",
            path: "/",
            nameEn: "top",
            sort: 0,
            isEnable: false,
            children: [
              {
                expand: true,
                level: 2,
                title: "基础管理",
                name: "基础管理",
                path: "/base",
                nameEn: "base",
                sort: 1,
                isEnable: false,
                children: [
                  {
                    title: "鉴定报告文件",
                    name: "鉴定报告文件",
                    level: 3,
                    path: "/identification",
                    nameEn: "identification",
                    sort: 1,
                    isEnable: false,
                  },
                  {
                    title: "客户信息",
                    name: "客户信息",
                    level: 3,
                    path: "/customer",
                    nameEn: "customer",
                    sort: 2,
                    isEnable: false,
                  }
                ]
              },
              {
                expand: true,
                title: "运单管理",
                level: 2,
                name: "运单管理",
                path: "/awb",
                nameEn: "awb",
                sort: 2,
                isEnable: false,
                children: [
                  {
                    title: "到货通知",
                    name: "到货通知",
                    level: 3,
                    path: "/arrive",
                    nameEn: "arrive",
                    sort: 1,
                    isEnable: true,
                  },
                  {
                    title: "运单任务跟进",
                    name: "运单任务跟进",
                    level: 3,
                    path: "/awbfollow",
                    nameEn: "awbfollow",
                    sort: 2,
                    isEnable: false,
                  }
                ]
              }
            ]
          }
        ],
        dropDownSelect: [
          {
            value: 'refresh',
            label: '刷新',
          },
          {
            value: 'rollall',
            label: '收合所有',
          },
          {
            value: 'openone',
            label: '仅展开一级'
          },
          {
            value: 'opentwo',
            label: '仅展开两级'
          },
          {
            value: 'openall',
            label: '展开所有'
          }
        ],
      }
    },
    methods: {
      childNodeOk(name) {
        let childModal = this.$refs.childNodeModel;
        this.$refs[name].validate((valid) => {
          let childNode = {
            title: this.childForm.name,
            name: this.childForm.name,
            path: this.childForm.path,
            level: this.checkedNode.level + 1,
            nameEn: this.childForm.nameEn,
            sort: this.childForm.sort,
            isEnable: this.childForm.isEnable
          };
          if (valid) {
            this.append(this.checkedNode, childNode);
            this.resetChildForm('childForm');
            childModal.close();
          } else {
            console.log("表单 没有通过校验");
            return false;
          }
        })

      },
      childNodeCancel(name) {
        this.resetChildForm('childForm');
        this.$refs[name].resetFields();
        this.$refs.childNodeModel.close();
      },
      topNodeOk(name) {
        let _that = this;
        let topModal = this.$refs.topNodeModel;
        this.$refs[name].validate((valid) => {
          let topNode = {
            title: this.topForm.name,
            name: this.topForm.name,
            path: this.topForm.path,
            level: 1,
            nameEn: this.topForm.nameEn,
            sort: this.topForm.sort,
            isEnable: this.topForm.isEnable
          };
          if (valid) {
            this.appendTopNode(_that.menutree, topNode);
            this.resetTopForm('topForm');
            topModal.close();
          } else {
            console.log("表单 没有通过校验");
            return false;
          }
        })

      },
      topNodeCancel(name) {
        this.resetTopForm('topForm');
        this.$refs[name].resetFields();
        this.$refs.topNodeModel.close();
      },

      addChildNode() {
        //校验1： 不存在已选中的节点,提示
        if (!this.checkedNode) {
          this.$Message["warning"]({background: true, content: '请点击选择要修改的菜单节点'});
          return false;
        }
        //校验2： 只允许添加到 level等于3的按钮权限层级
        if (this.checkedNode.level === 4) {
          this.$Modal.warning({
            title: "提示",
            content: '不能添加啦，仅支持三级菜单权限'
          });
          return false;
        }
        console.log("即将在【" + this.checkedNode + "】节点下添加一个子节点");
        this.childNodeModel = true;
      },
      addTopNode() {
        console.log("你点击了【添加顶部节点】 按钮");
        //打开模态框
        this.topNodeModel = true;

      },
      handleSubmit(name) {
        let _that = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            if(_that.checkedNode){
              this.$Message.success('Success!');
            }else{
              this.$Message["warning"]({background: true, content: '请点击选择要修改的菜单节点'});
            }
          } else {
            console.log("表单验证存在错误，请填写规范后重试");
            return false;
          }
        })
      },
      handleReset(name) {
        if (this.$refs[name] !== undefined) {
          this.$refs[name].resetFields();
        } else {
          console.log("没找到需要重置的元素")
        }
      },
      selectTreeMenu(arr, data) {
        console.log(data.name);
        //变更提示信息中的数据
        if (data.name && data.name !== this.checkedNode.name) {
          this.renderForm(data);
        } else {
          this.resetForm()
        }
      },
      renderForm(data) {
        this.checkedNode = data;
        this.formValidate.name = data.name;
        this.formValidate.path = data.path;
        this.formValidate.nameEn = data.nameEn;
        this.formValidate.level = data.level;
        this.formValidate.sort = data.sort;
        this.formValidate.isEnable = data.isEnable;
      },
      resetForm() {
        this.checkedNode = "";
        this.formValidate.name = "";
        this.formValidate.path = "";
        this.formValidate.nameEn = "";
        this.formValidate.level = "";
        this.formValidate.sort = 0;
        this.formValidate.isEnable = false;
      },
      resetChildForm() {
        this.childForm.name = "";
        this.childForm.path = "";
        this.childForm.nameEn = "";
        this.childForm.level = "";
        this.childForm.sort = 0;
        this.childForm.isEnable = false;
      },
      resetTopForm() {
        this.topForm.name = "";
        this.topForm.path = "";
        this.topForm.nameEn = "";
        this.topForm.level = "";
        this.topForm.sort = 0;
        this.topForm.isEnable = false;
      },
      append(data, child) {
        const children = data.children || [];
        children.push({
          expand: true,
          title: child.name,
          name: child.name,
          path: child.path,
          nameEn: child.nameEn,
          level: child.level,
          sort: child.sort,
          isEnable: child.isEnable
        });
        this.$set(data, 'children', children);
      },
      appendTopNode(data, child) {
        //添加顶级元素
        data.push(child);
      },
      remove(root, node, data) {
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
      },
      deleteNodes(){
        this.$Message["info"]({background: true, content: '正在努力开发中...'});
      },
      dispatchActions(name){
        //请求分发
        switch (name){
          case "refresh":
            this.refreshNodes();
            break;
          case "rollall":
            this.$Message["info"]({background: true, content: '正在努力开发中...'});
            break;
          case "openone":
            this.$Message["info"]({background: true, content: '正在努力开发中...'});
            break;
          case "opentwo":
            this.$Message["info"]({background: true, content: '正在努力开发中...'});
            break;
          case "openall":
            this.$Message["info"]({background: true, content: '正在努力开发中...'});
            break;
          default:
            this.$Message["info"]({background: true, content: '正在努力开发中...'});
            break;
        }

      },
      refreshNodes(){
        let that = this;
        that.spinShow = true;
        //发送请求 展示loading
        setTimeout(function () {
          //请求到数据之后 关闭loading
          that.spinShow = false;
        },1500)
      }

    }
  }
</script>

<style lang="less">
  @import 'index.less';
</style>
